﻿
<style>
    .img-upload-container {
        overflow: hidden;
    }

    .img-container {
        width: 100%;
        border: 1px solid #ddd;
        height: 200px; /*webuploader的上传按钮如果被挤开会错位*/
        padding: 10px;
    }

    .img-upload-file {
        position: relative;
        width: 150px;
        height: 180px;
        float: left;
        margin-right: 10px;
    }

    .img-upload-file img {
        width: 100%;
        height: 80%;
    }

    .img-upload-file-name {
        padding: 0;
        margin: 0;
        text-overflow: ellipsis;
        white-space: nowrap; /*禁止自动换行*/
        overflow: hidden;
        font-weight: normal;
    }

    .img-upload-file-state {
        position: absolute;
        width: 100%;
        top: 67%;
        display: block;
        text-align: center;
        background-color: rgba(2, 151, 199, 0.50);
    }

    .upload-bottom {
        margin-top: 15px;
    }

    .upload-bottom > a:first-child {
        display: inline-block;
        margin-right: 5px;
    }

    .file-upload-container {
        margin-top: 20px;
    }

    .file-upload-head {
        margin-top: 10px;
    }

    .file-upload-head a:first-child {
        display: inline-block;
        margin-right: 5px;
    }

    .file-upload-body {
        margin-top: 10px;
        border: 1px solid #ccc;
        width: 100%;
        padding: 5px;
    }

    .file-upload-body thead tr {
        height: 20px;
        border-bottom: 1px solid #ccc;
    }

    .file-upload-progress {
        position: relative;
    }

    .file-upload-progress > span {
        display: block;
        height: 5px;
        width: 90%;
        position: absolute;
        top: 15px;
        background: #ddd;
    }

    .file-upload-progress > span > span {
        display: block;
        height: 100%;
        width: 0%;
        background: #04aff3;
    }
    .btn-upload {
        position: relative;
        top: -11px;
        padding: 0px 5px;
    }
</style>
<div style="margin:20px">
    <div id="imgUploadContainer@(m)" class="img-upload-container">
        
        <div class="img-container"></div><div class="upload-bottom">
    <a>选择图片</a>
    <button class="easyui-linkbutton c1 btn-upload">开始上传</button>
</div>
        <span>
            简单图片上传演示
        </span>
    </div>
    <div id="fileUploadContainer@(m)" class="file-upload-container">
        <div class="file-upload-head">
            <a>选择文件</a>
            <button class="easyui-linkbutton c1 btn-upload">开始上传</button>
        </div>
        <table class="file-upload-body">
            <thead>
                <tr>
                    <th>文件名</th>
                    <th>文件大小</th>
                    <th>上传进入</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
        <span>
            大文件分片、多线程上传，目前不支持断点续传和秒传<br />
            上传前需要计算文件的md5值，上传大文件时点击上传按钮后请耐心等待
        </span>
    </div>
</div>

<script>
    (function () {
        var m = 'DemoUpload';

        WebUploader.Uploader.register({
            "before-send-file": "beforeSendFile",
            "before-send": "beforeSend"
        },{
            beforeSendFile: function (file) {
                //console.log("上传文件前Hook");

                var deferred = WebUploader.Base.Deferred();
                //console.log("beforeSendFile deferred created");

                (new WebUploader.Uploader()).md5File(file)
                    .progress(function (percentage) {
                        console.log('生成文件md5实时进度:', percentage);
                    })
                    .then(function (val) {
                        console.log('文件MD5生成完毕:', val);
                        file.md5 = val;
                        deferred.resolve();
                    });
                return deferred.promise();
            },
            beforeSend: function (block) {
                //console.log("上传分片前");
                var file = block.file;
                //var deferred = WebUploader.Base.Deferred();
                //console.log("beforeSend deferred created");
                var _this = this;
                //(new WebUploader.Uploader()).md5File(file)
                //    .progress(function (percentage) {
                //        console.log('生成分片md5实时进度:', percentage);
                //    })
                //    .then(function (val) {
                //        console.log('分片MD5生成完毕:', val);
                        _this.owner.options.formData.filemd5 = file.md5;
                        //_this.owner.options.formData.chunkmd5 = val;
                //        deferred.resolve();
                //    });
                //return deferred.promise();
            }
        });

        var $imgUploadContainer = $('#imgUploadContainer' + m);
        var $list = $imgUploadContainer.find('.img-container');
        var $picker = $imgUploadContainer.find('.upload-bottom > a:first');
        var $btn = $imgUploadContainer.find('.upload-bottom button:first');

        var uploader = WebUploader.create({
            chunked:true,
            chunkSize: 1024 * 512,
            //swf: '/lib//webuploader/0.1.5/Uploader.swf',
            server: abp.appPath +'/api/file/upload',   // 文件接收服务端。
            pick: $picker.selector,
            //resize: false,
            accept: [{
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }],
            dnd: $list.selector,
            paste: document.body,//$list也可以
            disableGlobalDnd:true
        });
        console.log('ddd');
        uploader.on('fileQueued', function (file) {
            //file.id是进入队列的文件的唯一标识，同一个文件两次进入队列后id不一样
            var $li = $('<div id="' + file.id + '" class="img-upload-file">' +
                '<img src="#" class="img-upload-file-img" />'  +
                '<h4 class="img-upload-file-name">' + file.name + '</h4>' +
                '<div class="img-upload-file-state">等待上传...</div>' +
                '</div>').appendTo($list);
            uploader.makeThumb(file, function (error, ret) {
                if (error) {
                    $li.find('.img-upload-file-state').text('预览错误');
                } else {
                    $li.find('img').attr('src',ret);
                }
            });
        });
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $imgUploadContainer.find('#' + file.id);
            var $state = $li.find('.img-upload-file-state');
            $state.text(percentage * 100 + '%');
        });
        uploader.on('uploadBeforeSend', function (obj, data, headers) {
            headers[abp.security.antiForgery.tokenHeaderName] = abp.security.antiForgery.getToken();

            headers.Authorization = "Bearer " + abp.auth.accessToken;
            data.module = 'EquipmentInfo';
            data.permission = 'Administrator.Asset.EquipmentInfo.Create';


        });
        uploader.on('uploadSuccess', function (file, response) {
            var $li = $imgUploadContainer.find('#' + file.id);
            var $state = $li.find('.img-upload-file-state');
            $state.text('上传成功！');
            alert('文件：' + file.name + '上传成功！完成路径：' + response[0].path);
        });
        
        $btn.on('click', function () {
            uploader.upload();
        });


        //----------------------------------------------------------------------------------------------

        var $fileUploadContainer = $('#fileUploadContainer' + m);
        var $fileContainer = $fileUploadContainer.find('.file-upload-body');
        var $filePicker = $fileUploadContainer.find('.file-upload-head > a:first');
        var $fileBtn = $fileUploadContainer.find('.file-upload-head button:first');

        var fileUploader = WebUploader.create({
            chunked: true,
            chunkSize: 1024 *512,
            prepareNextFile :true,
            threads:10,
            swf: '/lib//webuploader/0.1.5/Uploader.swf',
            server: '/api/file/upload',   // 文件接收服务端。
            pick: $filePicker.selector,
            //resize: false,
            //accept: [{
            //   title: 'Images',
            //   extensions: 'gif,jpg,jpeg,bmp,png',
            //   mimeTypes: 'image/*'
            //}],
            dnd: $fileContainer.selector,
            paste: document.body,//$list也可以
            disableGlobalDnd:true
        });
        fileUploader.on('fileQueued', function (file) {
            //file.id是进入队列的文件的唯一标识，同一个文件两次进入队列后id不一样
            var $li = $('<tr id="'+file.id+'">'+
                '<td>' + file.name + '</td>' +
                '<td>' + parseInt( file.size / 1024/1024) + 'mb</td>' +
                    '<td class="file-upload-progress" >'+
                        '<span><span></span></span>'+
                    '</td>' +
                    '<td><a id="del' + file.id + '" class="easyui-linkbutton c5">删除</a> </td>' +
                    '</tr>').appendTo($fileContainer);
            $.parser.parse($fileContainer);  // 解析指定节点
            $li.find('a').on('click', function () {
                $li.remove();
                fileUploader.removeFile(file);
            });
        });
        fileUploader.on('uploadStart', function (file) {

        });
        fileUploader.on('uploadProgress', function (file, percentage) {
            var $li = $fileUploadContainer.find('#' + file.id);
            var $progressBar  = $li.find('.file-upload-progress span').eq(1);
            $progressBar.width(percentage * 100 + '%');
        });
        fileUploader.on('uploadBeforeSend', function (obj, data, headers) {
            headers[abp.security.antiForgery.tokenHeaderName] = abp.security.antiForgery.getToken();
        });
        fileUploader.on('uploadSuccess', function (file, response) {
            alert('文件：'+file.name+'上传成功！完成路径：'+response[0].path);
        });
        $fileBtn.on('click', function () {
            fileUploader.upload();
        });
    }());
</script>
